<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PPT 预览</title>
  
  <!-- pptxjs CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/meshesha/pptxjs@master/css/pptxjs.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nvd3@1.8.6/build/nv.d3.min.css">
  
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html, body {
      height: 100%;
      overflow: hidden;
      background: #f5f7fa;
    }
    
    #loading {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #f5f7fa;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
      color: #409EFF;
      z-index: 9999;
    }
    
    .spinner {
      width: 50px;
      height: 50px;
      border: 4px solid #e4e7ed;
      border-top-color: #409EFF;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 20px;
    }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    #error {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #f5f7fa;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
      color: #F56C6C;
      z-index: 9998;
    }
    
    #error-icon {
      font-size: 80px;
      margin-bottom: 20px;
    }
    
    #error-message {
      font-size: 16px;
      margin-bottom: 10px;
      max-width: 600px;
      text-align: center;
      line-height: 1.6;
    }
    
    #result {
      width: 100%;
      height: 100%;
      overflow: auto;
      padding: 20px;
      display: none;
    }
    
    /* 优化幻灯片样式 */
    #result .slide {
      margin: 20px auto;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      overflow: hidden;
      background: white;
    }
    
    #result .slide:first-child {
      margin-top: 0;
    }
    
    #result .slide:last-child {
      margin-bottom: 0;
    }
  </style>
</head>
<body>
  <!-- 加载提示 -->
  <div id="loading">
    <div class="spinner"></div>
    <p>PPT 加载中，请稍候...</p>
  </div>
  
  <!-- 错误提示 -->
  <div id="error">
    <div id="error-icon">⚠️</div>
    <div id="error-message">PPT 加载失败</div>
    <p style="font-size: 12px; color: #909399;">请检查文件格式或刷新页面重试</p>
  </div>
  
  <!-- PPT 内容容器 -->
  <div id="result"></div>
  
  <!-- pptxjs 依赖 JS - 按正确顺序加载 -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jszip@2.7.0/dist/jszip.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/meshesha/filereader.js/filereader.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/d3@3.5.17/d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/nvd3@1.8.6/build/nv.d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/meshesha/pptxjs@master/js/pptxjs.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/meshesha/pptxjs@master/js/divs2slides.js"></script>
  
  <script>
    (function() {
      // 获取 URL 参数
      const urlObj = new URL(window.location.href);
      const params = new URLSearchParams(urlObj.search);
      const pptUrl = params.get('pptUrl');
      
      console.log('📊 PPT 预览页面加载');
      console.log('📄 PPT URL:', pptUrl);
      
      // 检查是否有 URL 参数
      if (!pptUrl) {
        showError('未提供 PPT 文件地址');
        return;
      }
      
      // 显示错误
      function showError(message) {
        document.getElementById('loading').style.display = 'none';
        document.getElementById('error').style.display = 'flex';
        document.getElementById('error-message').textContent = message;
      }
      
      // 显示预览
      function showPreview() {
        document.getElementById('loading').style.display = 'none';
        document.getElementById('result').style.display = 'block';
      }
      
      // 等待所有依赖加载完成
      function checkDependencies() {
        return new Promise((resolve, reject) => {
          let attempts = 0;
          const maxAttempts = 50; // 最多等待 5 秒
          
          const timer = setInterval(() => {
            attempts++;
            
            if (window.jQuery && window.jQuery.fn.pptxToHtml) {
              clearInterval(timer);
              console.log('✓ pptxjs 依赖已就绪');
              resolve();
            } else if (attempts >= maxAttempts) {
              clearInterval(timer);
              reject(new Error('pptxjs 依赖加载超时'));
            }
          }, 100);
        });
      }
      
      // 加载 PPT
      async function loadPPT() {
        try {
          // 等待依赖加载
          await checkDependencies();
          
          console.log('✓ 开始渲染 PPT...');
          
          // 捕获 pptxjs 的错误
          let hasError = false;
          const originalConsoleError = console.error;
          console.error = function(...args) {
            const errorMsg = args.join(' ');
            if (errorMsg.includes('CORS') || errorMsg.includes('Access-Control-Allow-Origin')) {
              hasError = true;
              showError('CORS 跨域限制：该文件服务器不允许跨域访问。建议：1) 下载文件后上传预览 2) 使用支持 CORS 的链接');
            } else if (errorMsg.includes('file url error') || errorMsg.includes('ERR_FAILED')) {
              hasError = true;
              showError('文件加载失败：无法访问该链接。可能原因：1) CORS 限制 2) 链接无效 3) 需要权限验证');
            }
            originalConsoleError.apply(console, args);
          };
          
          // 使用 pptxjs 渲染
          $("#result").pptxToHtml({
            pptxFileUrl: pptUrl,
            slidesScale: "70%",
            slideMode: false,
            keyBoardShortCut: false,
            mediaProcess: false // 禁用媒体处理以提高性能
          });
          
          // 等待渲染完成
          setTimeout(() => {
            // 恢复 console.error
            console.error = originalConsoleError;
            
            if (hasError) {
              return; // 已显示错误信息
            }
            
            const slides = document.querySelectorAll('#result .slide');
            if (slides.length > 0) {
              console.log(`✓ PPT 渲染成功，共 ${slides.length} 页`);
              showPreview();
            } else {
              console.warn('⚠️ 未检测到幻灯片，可能渲染失败');
              showError('PPT 渲染失败：可能是文件格式问题或 CORS 限制。建议下载后上传预览。');
            }
          }, 3000);
          
        } catch (error) {
          console.error('✗ PPT 加载失败:', error);
          showError('PPT 加载失败: ' + error.message);
        }
      }
      
      // 页面加载完成后执行
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', loadPPT);
      } else {
        loadPPT();
      }
    })();
  </script>
</body>
</html>

